<template>
    <div id="app" class="backf4" style="height: 100%;">
        <div id="header" class="header-top" v-show="!loading"> 
            <div class="flex-between" style="height: .99rem;line-height: .99rem;border-bottom: .01rem solid #e6e6e6;"> 
               <div class="center" style="margin-left: .64rem;width: 100%;font-size: .34rem;">我的订单</div>
              <div class="text-right" style="margin-right: .34rem;" @click="operaPopup(true)">
                <img src="../../../assets/img/search_icon.png" style="width: .3rem;height:.32rem;vertical-align: -.09rem;">
              </div>
            </div>
            <div class="find-title">
              <div @click="searchByType(1)" :class="{'active':type==1}"  >
                  <div class="big-title center">我约订单
                  </div>
              </div>
              <div @click="searchByType(2)" :class="{'active':type==2}" >
                  <div class="big-title center" style="border-left:.02rem solid #cccccc;">约我订单</div>
              </div>
            </div>
        </div>
        <loading v-if="loading"></loading>
        <div v-else>
            <mt-loadmore :top-method="loadTop" :autoFill="autoFill" @top-status-change="handleTopChange" v-if="orderList" class="list" :style="style" ref="loadmore" :maxDistance="maxDistance">
              <div slot="top" class="mint-loadmore-top">
                <span v-show="topStatus !== 'loading'"><img class="loading-gif" src="../../../assets/img/loading.gif"/></span>
                <span v-show="topStatus === 'loading'">刷新成功</span>
                </div>
                <div class="group" v-infinite-scroll="loadMore"  infinite-scroll-disabled="loadingMore" infinite-scroll-distance="10" infinite-scroll-immediate-check="true"> 
                    <div class="order-item" v-for="(item,index) in orderList" :key="index" @click.stop="enterDetail(item.id,item.status)">
                        <div class="item-header-top">
                            <div class="order-no" v-text="'订单编号：'+item.number"></div>
                            <div>
                              <span class="status" v-if="item.status == 1">未支付</span>
                              <span class="status" v-if="item.status == 2">待接单</span>
                              <span class="status" v-if="item.status == 3">待服务</span>
                              <span class="status" v-if="item.status == 4">服务中</span>
                              <!-- <span class="status3" v-if="item.status == 41">服务中</span> -->
                              <span class="status" v-if="item.status == 5">已完成</span>
                              <span class="status" v-if="item.status == 6">申诉中</span>
                              <span class="status" v-if="item.status == 7">申诉成功</span>
                              <span class="status" v-if="item.status == 8">申诉驳回</span>
                              <span class="status" v-if="item.status == 9">已取消</span>
                              <span class="status" v-if="item.status == 99">已完成</span>
                            </div>
                        </div>
                        <div style="margin:.35rem .34rem;border-bottom: .01rem solid #E6E6E6;padding-bottom: .35rem;">
                           <div class="order_head_bg">
                             <img v-if="item.head" class="order_head" :src="item.head" @error="errorimg(index)">
                             <img v-else class="order_head" src="../../../assets/img/default_head.png">
                           </div>
                           <div  style="width: 2.2rem;">
                            <p class="order_name" v-text="item.nickname"></p>
                            <p class="order_skill" v-text="item.service_title"></p>
                          </div>
                           <div style="width: 3.12rem;" class="text-right">
                              <p class="order_paragraph moreDot text-right">{{item.pay_time | time("MM-dd hh:mm",item.pay_time)}} {{item.nums}}{{item.units}}</p>
                              <p class="moreDot text-right" style="font-size: .26rem;margin-top: .1rem;" v-text="'￥'+item.price+'/'+item.units"></p>
                           </div>
                        </div>
                        <div class="order-footer">
                            <div class="order-time">{{item.pay_time | time("yyyy-MM-dd hh:mm",item.pay_time)}}</div>
                            <div><span class="order_money_title">实付</span><span class="order_money" v-text="'￥'+item.order_payment_price"></span></div>
                        </div>
                    </div>
                    <p v-show="loadingMore && !isAll" class="page-infinite-loading">
                      <mt-spinner type="fading-circle"></mt-spinner>
                    </p>
                    <p v-show="loadingMore && isAll" class="page-infinite-loading" style="font-size: .22rem;color:#8e94b7; width: 100%;">没有更多数据了</p>
                </div>
                <div v-if="orderList.length == 0">
                  <div class="flex" style="margin-top: 1rem;">
                        <img src="../../../assets/img/no-data-order.png" alt="点击屏幕，重新加载~" class="no-data"/>
                    </div>
                    <div class="default-text center">没有订单~</div>
                </div>
            </mt-loadmore>
            <div v-if="isSearch">
              <div class="popup z-fixed">
                  <div class="bg"  @click="operaPopup(false)"></div>
                  <div class="searchBox">
                    <div class="relative">
                        <div class="bar">
                          <span class="search-title">筛选</span>
                          <img src="../../../assets/img/close_icon.png" class="close_icon absolute" @click="operaPopup(false)" />
                        </div>
                        <div class="search-controller">
                            <p class="search-title-name">订单状态</p>
                            <div class="sex-radio flex">
                               <div class="item center" :class="{'active':status==0}" @click="setStatus(0)">全部</div>
                               <div class="item center" :class="{'active':status==2}" @click="setStatus(2)">已完成</div>
                               <div class="item center" :class="{'active':status==1}" @click="setStatus(1)">未完成</div>
                            </div>
                        </div>
                        <div class="flex center" style="border-top:2px solid rgba(244,244,244,1);margin-top:.45rem;padding-top: .41rem;">
                          <div class="btn btn-cancel" @click="operaPopup(false)">取消</div>
                          <div class="btn btn-sure" @click="searchByStatus()">确定</div>
                        </div>
                    </div>
                </div>
              </div>
            </div>
            <div class="backTop" v-if="isBack" @click="backTop"></div>
        </div>
      </div>
    </div>
</template>
<script>
import './index.css';
import common from 'assets/js/common';
import { Loadmore,Spinner,InfiniteScroll } from 'mint-ui';
import Loading from "components/loading.vue"
export default {  
  data(){
    return {
        topStatus:'',
        autoFill:false,
        page:1,
        row:10,
        orderList:[{
          id:10000,
          title:'hahahha'
        }],
        loadingMore:false,
        isAll:false, //是否全部加载完
        status:0, // 1-未完成  2-已完成   0-全部
        type:1,   //1-我约的订单   2-约我的订单
        isSearch:false,
        loading:true,
        platform:'h5',
        isBack:false,
        t:'',
        maxDistance:100,
        style:{
          width:'7.5rem'
        }
    }
  },
  components:{ Loadmore,Spinner,InfiniteScroll,Loading },
  mounted:function(){
      this.platform = common.platform;
      this.getMyOrder(1);
  },
  methods: {
      handleTopChange(status) {
        this.topStatus = status;
      },
      operaPopup:function(bool){
        this.isSearch = bool;
      },
      // 下拉刷新数据
      loadTop() {
          setTimeout(() => {
            this.page = 1;
            this.getMyOrder();
            this.$refs.loadmore.onTopLoaded();
            this.isBack = false;
          }, 500);
      },
      backTop(){
        $('.list').animate({scrollTop: '0px'}, 800);
        this.loadTop();
      },
      loadMore(){
          this.isBack = true;
          //显示加载中动画 
          this.loadingMore = true;
          this.page = this.page+1;
          setTimeout(() => {
            if(!this.isAll){
              this.getMyOrder();
            }
          },100)
      },
      errorimg:function(index){
          this.orderList[index].head = require("assets/img/default_head.png");
      },
      setStatus:function(status){
        this.status = status;
      },
      searchByStatus:function(){
        this.operaPopup(false);
        //重新查第一页
         this.page = 1;
         this.getMyOrder();
      },
      searchByType:function(type){
         //this.loadingMore = false;
         this.type = type;
         this.page = 1;
         this.getMyOrder();
         this.backTop();
      },
      //获取在线用户列表
      getMyOrder:function(num){
          common.ajax({
              type:'GET',
              url:'api/adder/order/quiz/'+this.type,
              data:{
                 p:this.page,
                 row:this.row,
                 status:this.status
              }
          }).then(res=>{
             this.loading = false;
             let respose = res.data;
             if(this.page == 1 ){
                this.orderList = respose;
              }else{
                this.orderList = [...this.orderList,...respose];
              }
              //隐藏动画
              this.loadingMore = false;
              if(respose.length < this.row){
                  this.isAll = true;
              }else{
                this.isAll = false;
              }
              if(num == 1 ){
                  var height = window.innerHeight;
                  var headerHeight = $("#header").height();
                   this.style = {
                     'width':'7.5rem',
                     'height':(height-headerHeight)+"px",
                     'padding-top':headerHeight+"px"
                   }
              }
          })
      },
      enterDetail(id,status){
        location.href = "./../../views/myorderdetail/index.html?h5=true&orderId="+id;
      }
  }
} 
</script>

